<template>
	<div class="delegate">
		<ul class="nav">
			<li :class="{checked: menuIndex == index}" v-for="(item,index) in menu" :key="index" @click='sendAjax(index)'>
				{{ item }}
			</li>
		</ul>

		<div class="limitW" :style='{width:width + "px"}'>
			<table>
				<tr><th>状态</th><th>委托号</th><th>钱包类型</th><th>委托数量</th><th>单价</th><th>挂单时间</th><th>完成时间</th></tr>
				<tr v-for="(item,index) in data" :key='index' @click='isJump(item)'>
					<td>{{item.status | TXLStatus}}</td>
					<td>{{item.depute_code}}</td>
					<td>{{item.transform_wallet | walletType}}</td>
					<td>{{item.trade_num}}</td>
					<td>{{item.price}}</td>
					<td>{{item.trade_time | fmtDate}}</td>
					<td>{{item.receive_time | fmtDate }}</td>
				</tr>
			</table>
		</div>
		<router-view />
	</div>
</template>

<script>
import { myTradeIn, myTradeSellerOu } from '../../../../config/getData'
export default {
	data(){
		return {
			menu:['买入委托','卖出委托'],
			menuIndex:0,
			data:[],
			total:-1,
			width:-1
		}
	},
	methods:{
		isJump(item){
			if(item.status == 1 || item.status == 11){
				var txt = item.status == 1 ? '求购中不可查看详情' : item.status == 11 ? '出售中不可查看详情' : '可进详情页面'
				this.$vux.toast.show({
					text: txt,
					width:'auto',
				})
				 return;
			}

			this.$router.push("delegate/confirmDeta/" + item.id + "/" + item.status)
		},
		sendAjax(index){
			this.menuIndex = index
			this.initData()
		},
		initData(){
			if(this.menuIndex === 0){
				myTradeIn().then( res => {
					this.data = res.data.data
					this.total = res.data.total
				})
			}else if(this.menuIndex === 1){
				myTradeSellerOu().then( res => {
					this.data = res.data.data
					this.total = res.data.total
				})
			}
		}
	},
	created(){
		this.width = document.documentElement.offsetWidth
		this.initData()
	}
}
</script>


<style lang="scss" scoped>
table{width:700px;}
.limitW{overflow-x: auto;
	table tr td:nth-of-type(3){color:red;}
}
.delegate{padding:1px 0;
	.nav{display: flex;margin-top:10px;
		li{width:120px;line-height: 36px;text-align: center;}
		li.checked{color:#e86e50;background-color: white;}
	}

}

@media screen and (min-width: 400px) {
     .limitW{width:100% !important;}
     .limitW table{width:100% !important;}

}
</style>

